<script>
function modifyTimeSlot(input){
        if(input == "0") {
            return;
        }
        window.location = "Modification.do?slotID=" + input;
}	
</script>

<div id="managementHome" align="center">
  <h2>Management</h2>
  <p id="errorMessage">${topDisplayMsg}</p>
  <table id="movieTable" summary="List of movie">
    <tbody>
      <c:forEach var="i" begin="0" end="${noOfMovie - 1}">
        <tr class="${i%2==0?"odd":"even"}">
          <td><img src="${availableMovies[i].thumbnailPath}" alt="${availableMovies[i].name}"></td>
          <td><dl>
              <dt>${availableMovies[i].name}</dt>
            </dl>
            <select onchange="modifyTimeSlot(this.options[this.selectedIndex].value)">
              <option value="0" selected="selected">Available Date and time</option>
              <c:forEach var="j" begin="1" end="${availableMovies[i].noOfShowTime}">
                <option value="${availableMovies[i].movieSlot[j - 1].slotID}&house=${availableMovies[i].movieSlot[j - 1].house}&movieName=${availableMovies[i].name}&startTime=${availableMovies[i].movieSlot[j - 1].startTime}&movie=${availableMovies[i].name}">${availableMovies[i].movieSlot[j - 1].startTime}  House ${availableMovies[i].movieSlot[j - 1].house}  $${availableMovies[i].movieSlot[j - 1].price}</option>
              </c:forEach>
            </select>
            <a href="addTimeSlot.jsp?movie=${availableMovies[i].name}" title="Add Time Slot">Add Time Slot</a></td>
        </tr>
      </c:forEach>
    </tbody>
  </table>
</div>
